<template>
    <!-- 底部分页组件 -->
    <div class="bottomPagination">
        <div class="data_pagination">
            <a-pagination
                style="float:right;margin-right:10px;" 
                :pageSizeOptions="pageSizeOptions"
                :total="total" 
                show-size-changer 
                show-quick-jumper 
                :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
                @change="pageChange"
                @showSizeChange="sizeChange"
            />
        </div>
    </div>
</template>

<script>
    export default {
        name: "BottomPagination",
        components: {
                
        },
        props: {
            total: {
                type: Number,
                default: 0
            },

        },
        data () {
            return {
                pageSizeOptions: ['10', '20', '30'],
            }
        },
        methods: {
            // 修改页数
            pageChange(pageNo, pageSize) {
                this.$emit('pageChange', pageNo, pageSize)
            },
            // 修改条数
            sizeChange(pageNo, pageSize) {
                this.$emit('sizeChange', pageNo, pageSize)
            }
        },
    }
</script>

<style lang="less" scoped>
    .bottomPagination{
        .data_pagination{
            width: 100%;
            height: 32px;
            margin-top: 10px;
        }
    }
</style>
